<template>
  <view>
    <view class="page">
      <view class="box_6">

        <text lines="1" class="text_3">签字范围</text>
        <view style="width: 750rpx ;height: 1198rpx;">
          <l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
            :openSmooth="openSmooth"></l-signature>
        </view>



        <view class="group_4">
          <view class="text-wrapper_2">
            <text lines="1" decode="true" class="text_4" @click="onClick('save')">保&nbsp;存</text>
          </view>
          <view class="text-wrapper_3">
            <text lines="1" decode="true" class="text_5" @click="onClick('clear')">清&nbsp;除</text>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import signature from "@/mixins/signature.js"
  export default {
    mixins: [signature],
    data() {
      return {
        

      }
    },
    beforeUpdate(){
    },
    methods: {

    }
  }
</script>

<style>
  .mycanvas {
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 280rpx;
  }

  .page {
    background-color: rgba(255, 255, 255, 1.000000);
    position: relative;
    width: 750rpx;
    height: 1478rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .box_6 {
    width: 750rpx;
    height: 1478rpx;
    margin-bottom: 1rpx;
    display: flex;
    flex-direction: column;
  }

  .text-wrapper_1 {
    background-color: rgba(204, 204, 204, 1.000000);
    border-radius: 10rpx;
    height: 27rpx;
    display: flex;
    flex-direction: column;
    width: 52rpx;
    margin: 47rpx 0 0 668rpx;
  }

  .text_2 {
    width: 26rpx;
    height: 16rpx;
    overflow-wrap: break-word;
    color: rgba(254, 254, 254, 1);
    font-size: 18rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 0 0 0 25%;

  }

  .text_3 {
    /* margin: 250px auto; */
    position: absolute;
    top: 39%;
    left: 31%;
    font-size: 72rpx;
    line-height: 24px;
    color: rgba(204, 204, 204, 1);
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);

  }

  .group_4 {
    background-color: #373737;
    width: 750rpx;
    height: 280rpx;
    flex-direction: row;
    display: flex;
    position: absolute;
    bottom: 0rpx;
    /* margin: 270rpx 0 1rpx 0; */
    /* position: fixed;
    bottom: 0;
    left: 0; */


  }

  .text-wrapper_2 {
    height: 200rpx;
    background: url(https://636c-cloud1-4ge04zyie85f8672-1311921377.tcb.qcloud.la/K.png?sign=29ac54386591a58bc93c589b0ea54de7&t=1659443381) 100% no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    width: 86rpx;
    margin: 40rpx 0 0 173rpx;
  }

  .text_4 {

    margin: 40px auto;
    font-size: 36rpx;
    line-height: 36rpx;
    color: rgba(0, 0, 0, 1);
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);

  }

  .text-wrapper_3 {
    height: 200rpx;
    background: url(https://636c-cloud1-4ge04zyie85f8672-1311921377.tcb.qcloud.la/K.png?sign=29ac54386591a58bc93c589b0ea54de7&t=1659443381) 100% no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    width: 86rpx;
    margin: 40rpx 340rpx 0 65rpx;
  }

  .text_5 {
    margin: 40px auto;
    font-size: 36rpx;
    line-height: 36rpx;
    color: rgba(0, 0, 0, 1);
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
  }
</style>
